<template>
    <div class="use-l7-map">
        <el-button class="btn" @click="changeMap">change</el-button>
        <L7Map map-id="my-map" @loaded="handleLoaded" :options show-draw>
        </L7Map>
    </div>
</template>

<script setup lang="ts">
import { Scene } from '@antv/l7'
import type { Map as MapboxMap } from 'mapbox-gl';

const options: any = ref({
    projection: 'globe',
})

// 创建地图实例
let myMap: MapboxMap | null
const handleLoaded = (scene: Scene, map: MapboxMap) => {
    ElMessage.success('L7Map Loaded!')
    myMap = map
}
const changeMap = () => {
    if (!myMap) return
    const projection = myMap.getProjection()
    if (projection.name == 'globe') {
        myMap.setProjection('mercator')
    } else {
        myMap.setProjection('globe')
    }
}
</script>

<style lang="less" scoped>
.use-l7-map {
    width: 100%;
    height: 100%;
    position: relative;

    .btn {
        left: 200px;
        top: 8px;
        position: absolute;
        z-index: 999999;
    }
}
</style>